<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.1.js"></script>

    <title>设置按钮</title>
</head>
<body>

<div id="app" >
    <div class="layui-btn-group" style="margin: 5px 10px;">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" @click="f_add()">增加</button>
    </div>
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col >
            <col width="210" >
        </colgroup>
        <thead>
        <tr>
            <th>按钮名称</th>
            <th>是否打开录入界面</th>
            <th>自定义数据接口表id</th>
            <th>按钮类型</th>
            <th>点击后是否弹出询问窗口</th>
            <th>排序号</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in buttons">
            <td>
                <input type="text" v-model="buttons[index].name" placeholder="请输入按钮名称" autocomplete="off" class="layui-input">
            </td>
            <td>
                <select v-model="buttons[index].is_input" class="layui-input" style="width: 70px;" >
                    <option value="0">不打开</option>
                    <option value="1">打开录入</option>
                    <option value="2">打开列表</option>
                    <option value="3">行内按钮</option>

                    <option :value="item.col_name" v-for="(item,index) in listdict" >{{item.show_name}}</option>

                </select>
            </td>
            <td><input type="text" v-model="buttons[index].custom_data_zygl_id" :name="item.custom_data_zygl_id" placeholder="请输入按钮名称" autocomplete="off" class="layui-input"></td>
            <td>
                <select v-model="buttons[index].type" class="layui-input" style="width: 70px;">
                    <option value="0">新增</option>
                    <option value="1">修改</option>
                    <option value="2">删除</option>
                    <option value="3">自定义</option>
                    <option value="15">自定义-不打开</option>
                    <option value="16">自定义-打开录入</option>
                    <option value="17">自定义-打开列表</option>

                    <option value="4">列表自定义</option>
                    <option value="5">录入自定义</option>
                    <option value="6">排序自定义</option>
                    <option value="7">导出结果</option>
                    <option value="8">导出当前页</option>
                    <option value="9">查看详情</option>
                    <option value="10">数据导入</option>
                    <option value="15">数据导入(多工作表)</option>
                    <option value="11">对比数据提取</option>
                    <option value="12">批量修改与替换</option>
                    <option value="13">保存当前列表数据</option>
                    <option value="14">清除数据</option>
                    <option value="-1">未定义</option>
                </select>
            </td>
            <td>
                <select v-model="buttons[index].is_confirm" class="layui-input" style="width: 70px;" >
                    <option value="0">不询问</option>
                    <option value="1">询问</option>
                </select>
            </td>
            <td><input type="text" v-model="buttons[index].pxh" :name="item.pxh" placeholder="请输入按钮名称" autocomplete="off" class="layui-input"></td>

            <td>
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" @click="f_delete(item)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>

</div>

<script>
    var form = null;
    var $ = null;
    var vm = new Vue({
        el: '#app',
        data: {
            buttons:[],
            listdict:[]
        },
        created(){
            this.init();
        },
        methods:{
            init(){
                layui.use(['form','jquery'], function(){
                    form = layui.form;
                    $ = layui.jquery;



                    post("/admin/api/ColumnManagementController/getButtonsForTableId",{tableId:top.data.uptableId},function (resData) {
                        vm.buttons = resData.data.listbutton;
                        vm.listdict = resData.data.listdict;
                        vm.$nextTick(function () {
                            form = layui.form;


                        });
                    })

                });
            },
            f_delete(item){
                console.log(item)
                layer.confirm('确定要永久删除吗？', {
                    btn: ['确定', '取消'] //可以无限个按钮
                }, function(index, layero){
                    post("/admin/api/ColumnManagementController/deleteTableButtons",{id:item.id},function (res) {
                        layer.close(index);
                        top.alert(res.msg);
                        vm.init()
                    })
                }, function(index){
                    //按钮【按钮二】的回调
                });

            },
            f_add(){
                vm.buttons.push({id:"0",name:"自定义","is_input":"0",custom_data_zygl_id:top.data.uptableId,type:"3",zygl_id:top.data.uptableId,"pxh":vm.buttons.length+1,"is_confirm":"1"});
            }

        }
    })

    function getData() {
        let data = vm.buttons;
        return data;
    }

    function setData() {

    }
</script>
</body>
</html>
